import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Alert,Row, Col, Spin, InputNumber} from 'antd';
import { connect } from 'dva';
import styles from './index.less';
import {abs} from '@/utils/utils';


const FormItem = Form.Item;
@Form.create()
class ActiveRefundComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataFee: 0,
        }
    }


    // 取消
    handleCancel =() => {
        this.props.cancel();
    }

    componentWillMount() {
        this.getRefundMaxFee();
        window.Isoption = false;
    }
      componentDidMount() {
        window.Isoption = true;
      }

    getRefundMaxFee=()=> {
        const { dispatch } = this.props;
        dispatch({
            type: 'orderdetail/GetRefundMaxFee',
            payload: {
                ID: this.props.param.Id,
            },
            callBack: {
                success: res=> {
                    if(res.Code===0) {
                        this.setState({
                            dataFee: res.Data
                        })
                    }
                },
                error: res => {
                    console.log(res.Msg)
                }
            }
        })
    }

      handleSubmit = e => {
        e.preventDefault();
        const { dispatch } = this.props;
        this.props.form.validateFields((err, values) => {
            if(!err) {
                dispatch({
                    type: 'orderdetail/ActiveRefund',
                    payload: {
                        ItemId: this.props.param.Id,
                        Fee: values.fee
                    },
                    callBack: {
                        success: res => {
                            if(res.Code ===0) {
                                message.success('提交成功'),
                                this.props.ok();
                            }
                        },
                        error: res => {
                            message.error(res.Msg)
                        }
                    }
                })
            }
        })
      }

    render() {
        const {loading1, loading2} = this.props;
        const {getFieldDecorator} = this.props.form;
        const {dataFee} = this.state;
        return (
            <Form onSubmit={this.handleSubmit}>
                    <Spin spinning={loading1}>
                        <div style={{padding: 24}}>
                            <Alert message="商家主动退款功能是一个实验性产品，仅作为退款维权业务的补充功能，请勿过度依赖和使用。" type="warning" showIcon />
                            <div className="xkd-mt16">
                                <Row className={styles.navRow} style={{marginBottom: 0}}>
                                    <Col span={12}>商品名称</Col>
                                    <Col span={6} style={{textAlign: 'right'}}>可退金额</Col>
                                    <Col span={6} style={{textAlign: 'right'}}>退款金额</Col>
                                </Row>
                                <Row className={styles.modalItem}>
                                    <Col span={12}>{this.props.param.name}</Col>
                                    <Col span={6} style={{textAlign: 'right'}}>￥{dataFee}</Col>
                                    <Col span={6} style={{textAlign: 'right'}}>
                                        <FormItem>
                                            {getFieldDecorator('fee', {
                                                rules: [{required: true, message: '此项为必选项'}]
                                            })(
                                                <InputNumber min={0.01} max={dataFee/1}/>
                                            )}
                                        </FormItem>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                        <FormItem className="xkd-model-footBtn">
                            <Button onClick={this.handleCancel} className="xkd-mr8">
                                取消
                            </Button>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={loading2}
                            >
                                确认
                            </Button>
                        </FormItem>
                    </Spin>
            </Form>
        )
    }
}

const ActiveRefund = createModalContainer(
    connect(({orderdetail, global, loading}) =>({
        orderdetail,
        loading1: loading.effects['orderdetail/GetRefundMaxFee'],
        loading2: loading.effects['orderdetail/ActiveRefund'],
    }))(ActiveRefundComponent),
    true,
    true
);

export default ActiveRefund;